<style lang="less">
@import "../styles/common.less";
@import "../tables/components/table.less";
</style>
<style>
</style>
<template>
  <div class="div-relative">
    <Row class="row" :gutter="10">
      <Col span="24" class="padding-left-10 list-div">
        <Card>
          <div class="table-head">
            <div class="left" @keydown.enter="searchFun">
              <Input v-model="search_title" size="default" placeholder="关键字" />
            </div>
            <div class="left-btn">
              <Button type="text" icon="ios-search" @click="searchFun()">搜索</Button>
            </div>
            <!-- <Button type="primary" class="Button" @click="add()">添加</Button> -->
          </div>
          <!-- <div class="table-head" v-show="selectionArr.length > 0">
            <div class="left-nums">选中 {{selectionArr.length}} 条 / 共 {{data.length}} 条</div>
            <div class="left-btn">
              <Button type="error" class="Button" @click="remove()">删除</Button>
            </div>
            <div class="left-btn">
              <Button
                type="warning"
                class="Button"
                @click="updateFun()"
                :disabled="selectionArr.length == 1 ? false : true"
              >修改</Button>
            </div>
            <Button type="text" class="Button" @click="hideNums()">取消</Button>
          </div>-->
          <Row class="margin-top-10">
            <Table
              stripe
              border
              :columns="columns"
              :data="data"
              @on-row-click="onRowData"
              @on-selection-change="selectionChange"
              ref="selectionTable"
            ></Table>
          </Row>
          <div style="margin: 10px;overflow: hidden;height: 36px;">
            <div style="float: right;">
              <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

    <!--详情-->
    <Drawer
      :closable="false"
      :width="DrawerWidth"
      v-model="showCurrentTableData"
      class="Drawer-body"
      @on-close="closeDrawerFun"
    >
      <div class="Drawer_pStyle">
        <span></span>
        <span class="del" @click="asyncOK">
          <Button type="error" size="small" icon="md-close"></Button>
        </span>
      </div>
      <div class="body">
        <div class="body-Detail-div">
          <div class="title-div">
            <div class="title-title" v-if="dataDetail.name" v-text="dataDetail.name"></div>
          </div>
          <div class="ck-editor-content word-wrap" v-html="dataDetail.mobile"></div>
          <div class="title-height"></div>
          <Form label-position="top" class="no-border form-line">
            <FormItem label="已报课程">
              <div v-if="dataDetail_kc.length == 0" class="list-not-data">暂无数据</div>
              <div
                class="kc-list-div"
                v-for="el in dataDetail_kc"
                :key="'kid_'+el.id"
                @click="showKcDetail(el.id)"
              >
                <span v-text="el.title"></span>
                <span v-if="el.time">（{{el.time}} 课时）</span>
              </div>
            </FormItem>
          </Form>
          <div class="title-height"></div>
          <Form label-position="top" class="no-border form-line">
            <FormItem label="我的故事">
              <div v-if="dataDetail_storys.length == 0" class="list-not-data">暂无数据</div>
              <div
                class="kc-list-div"
                v-for="el in dataDetail_storys"
                :key="'sid_'+el.id"
                @click="showStoryDetail(el.id)"
              >
                <div class="story-div1">【{{el.type == "practice" ? "实践" : "评估"}}】</div>
                <div class="story-div2 text-ellipsis" v-text="el.title"></div>
                <div class="story-div3" v-text="el.create_time"></div>
              </div>
            </FormItem>
          </Form>
          <div class="title-height"></div>
          <div class="badge-div" v-if="dataDetail_badge.length > 0">
            <div
              class="item-div"
              v-for="el in dataDetail_badge"
              :key="el.id+'-badge'"
              :title="el.content"
              @click="badgeFun(el)"
            >
              <div class="b-img" :class="el.openid ? '' : 'huise'">
                <img :src="el.url" alt="图" />
                <Icon
                  type="md-checkmark-circle"
                  class="b-icon"
                  :class="el.openid ? 'b-color' : ''"
                />
              </div>
              <div class="b-title text-ellipsis" v-text="el.title"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}"></div>
    </Drawer>

    <!--课程详情-->
    <Drawer
      :closable="false"
      :width="DrawerWidth * 0.8"
      v-model="showKcglDetailData"
      class="Drawer-body"
      @on-close="closeDrawerFunKc"
    >
      <div class="Drawer_pStyle">
        <span></span>
        <span class="del" @click="asyncOKKc">
          <Button type="error" size="small" icon="md-close"></Button>
        </span>
      </div>
      <div class="body">
        <div class="body-Detail-div">
          <div class="title-div">
            <div class="title-title" v-text="dataDetail_kcxx.title"></div>
          </div>
          <Form label-position="top" class="no-border form-line" v-if="dataDetail_kcxx.steps">
            <FormItem label="课程徽章" v-if="dataDetail_kcxx.url">
              <img
                :src="dataDetail_kcxx.url"
                alt="课程徽章"
                style="width: 100px;height: 130px;"
                v-if="dataDetail_kcxx.url"
              />
            </FormItem>
            <FormItem label="课程章节">
              <div
                class="zj-div kc-list-div"
                v-for="el in dataDetail_kcxx.steps"
                :key="'sid_'+el.num"
              >
                <span class="zj-span" v-text="el.title"></span>
                <div class="zj-btnDiv" v-if="el.type == 'end'">已授课</div>
                <Button
                  class="zj-btn"
                  type="success"
                  size="small"
                  v-else
                  @click="checkSteps(el)"
                >点击已授课</Button>
              </div>
            </FormItem>
            <div class="title-height"></div>
            <FormItem label="已授课时（小时）">
              <Input v-model.trim="timeOver" placeholder="已授课时" class="timeOver"></Input>
              <Button class="timeOver-btn" type="success" size="small" @click="timeOverFun()">更新课时</Button>
            </FormItem>
            <div class="title-height"></div>
            <FormItem label="创建时间">
              <div class="zj-div" v-text="dataDetail_kcxx.create_time"></div>
            </FormItem>
          </Form>
          <div class="title-height"></div>
          <div class="ck-editor-content word-wrap" v-html="dataDetail_kcxx.content"></div>
        </div>
      </div>
      <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}"></div>
    </Drawer>

    <!--故事详情-->
    <Drawer
      :closable="false"
      :width="DrawerWidth * 0.8"
      v-model="showStoryDetailData"
      class="Drawer-body"
      @on-close="closeDrawerFunSt"
    >
      <div class="Drawer_pStyle">
        <span></span>
        <span class="del" @click="asyncOKSt">
          <Button type="error" size="small" icon="md-close"></Button>
        </span>
      </div>
      <div class="body">
        <div class="body-Detail-div">
          <div class="title-div">
            <div class="title-title" v-text="dataDetail_story.title"></div>
          </div>
          <div class="title-height"></div>
          <div class="ck-editor-content word-wrap" v-html="dataDetail_story.create_time"></div>
          <div class="title-height"></div>
          <div class="ck-editor-content word-wrap" v-html="dataDetail_story.content"></div>
          <div class="title-height"></div>
          <div class="story-img-div">
            <div class="div-img" v-for="el in dataDetail_story.image" :key="'img-'+el.id">
              <img :src="el.url" :alt="el.name" />
            </div>
          </div>
        </div>
      </div>
      <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}"></div>
    </Drawer>

    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>
<style lang="less">
.badge-div {
  width: 100%;
  min-height: 60px;
  position: relative;
  display: inline-block;
  padding: 10px;
}
.badge-div .item-div {
  width: 100px;
  height: 150px;
  float: left;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}
.badge-div .item-div .b-icon {
  font-size: 18px;
  position: absolute;
  right: 0px;
}
.badge-div .item-div .b-color {
  color: #19be6b;
}
.badge-div .item-div .b-img {
  width: 100px;
  height: 130px;
  text-align: center;
}
.badge-div .item-div .b-img img {
  width: 100px;
  height: 130px;
}
.badge-div .item-div .b-title {
  width: 100px;
  height: 20px;
  text-align: center;
}
.story-img-div {
  width: 100%;
  text-align: center;
}
.story-img-div .div-img {
  width: 80%;
  height: auto;
}
.story-img-div .div-img img {
  width: 100%;
}
.no-data {
  width: 100%;
  font-size: 30px;
  color: #777777;
  text-align: center;
  padding-top: 30%;
}
.zj-div {
  font-size: 14px;
  width: 100%;
  line-height: 40px;
  position: relative;
}
.zj-btnDiv {
  float: right;
  padding-right: 20px;
}
.zj-btn {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}
.kc-list-div {
  font-size: 14px;
  width: 100%;
  line-height: 40px;
  padding-left: 20px;
  cursor: pointer;
  border-bottom: #eee 1px solid;
  position: relative;
  height: 42px;
}
.kc-list-div:hover {
  background: #eee;
}
.story-div1 {
  float: left;
  width: 60px;
  height: 100%;
}
.story-div2 {
  float: left;
  width: ~"calc(100% - 200px)";
  height: 100%;
}
.story-div3 {
  float: left;
  width: 140px;
  height: 100%;
}
.timeOver {
  width: ~"calc(100% - 200px)";
}
.timeOver-btn {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}
</style>
<script>
import Cookies from "js-cookie";
import Util from "../../libs/util";
import Utils from "../../libs/mod.utils";
import String from "../../libs/mod.string";
import Modal from "../../libs/mod.Modal";
import Ckeditor from "../../libs/mod.ckeditor";
import commentsList from "../components/comments-list.vue";
import evaluateList from "../components/evaluate-list.vue";
import userAvatar from "../components/user-avatar.vue";
import userInfo from "../components/user-info.vue";
import spinPage from "../components/spin-page.vue";
import tagAdd from "../components/tag/tag-add.vue";
import modelAdd from "../components/model/model-add.vue";
import modelDetailUtils from "../../libs/vue.modelDetail";
import showAccessory from "../components/show-accessory.vue";

export default {
  components: {
    commentsList,
    evaluateList,
    userAvatar,
    userInfo,
    tagAdd,
    modelAdd,
    spinPage,
    showAccessory,
  },
  data() {
    return {
      uid: Util.toJson(localStorage.getItem("userInfo")).id,
      total: 0,
      page: 1,
      size: 10,
      order_by: [],
      id: "",
      openid: "",
      kid: "",
      search_title: "",
      showCurrentTableData: false,
      loading: true,
      showCurrentColumns: [],
      editInlineAndCellData: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          key: "name",
          title: "姓名",
          align: "center",
        },
        // {
        //   key: "nickname",
        //   title: "昵称",
        //   align: "center",
        // },
        // {
        //   key: "sex",
        //   title: "性别",
        //   align: "center",
        //   width: 90,
        //   render: (h, params) => {
        //     var sex = params.row.sex || "";
        //     var sexName = "保密";
        //     if (sex == "male") {
        //       sexName = "男";
        //     } else if (sex == "female") {
        //       sexName = "女";
        //     }
        //     return h("div", [h("span", sexName)]);
        //   },
        // },
        {
          key: "mobile",
          title: "电话",
          align: "center",
        },
      ],
      data: [],
      dataDetail: {},
      dataDetail_kc: [],
      dataDetail_kcxx: {},
      dataDetail_storys: [],
      dataDetail_story: {},
      dataDetail_badge: [],
      showKcglDetailData: false,
      showStoryDetailData: false,
      addCurrentTableData: false,
      saveLoading: false,
      ajaxType: "add",
      addData: {
        title: "",
        content: "",
        steps: [],
      },
      steps: 0,
      timeOver: 0, //课时
      selectionArr: [],
      editor: null,
      DrawerWidth: Util.constant.DrawerWidth, // 抽屉的宽度
      WindowWidth: Util.constant.WindowWidth, // 窗口的宽度
      WindowHeight: Util.constant.WindowHeight, // 窗口的高度
      showSpin: false, //加载中
    };
  },
  beforeMount: function () {
    var _this = this;
  },
  beforeDestroy: function () {
    var _this = this;
  },
  destroyed: function () {
    var _this = this;
  },
  created: function () {
    var _this = this;
    _this.getData();
  },
  mounted() {
    var _this = this;
  },
  methods: {
    // 搜索
    searchFun: function () {
      var _this = this;
      _this.page = 1;
      _this.getData();
    },
    onRowData: function (data, index) {
      var _this = this;
      _this.show(data);
    },
    changePage(page) {
      var _this = this;
      _this.page = page;
      _this.getData();
    },
    // 关闭了详情
    closeDrawerFun: function () {
      var _this = this;
      _this.dataDetail = {};
      _this.dataDetail_kc = [];
      _this.dataDetail_storys = [];
    },
    closeDrawerFunKc: function () {
      var _this = this;
      _this.dataDetail_kcxx = {};
    },
    closeDrawerFunSt: function () {
      var _this = this;
      _this.dataDetail_story = {};
    },
    // 课时
    timeOverFun: function () {
      var _this = this;
      var timeOver = _this.timeOver;
      var time = parseFloat(timeOver);
      if (timeOver == "" || time < 0) {
        _this.$Message.destroy();
        _this.$Message.error("请正确填写课时!");
        return false;
      }
      var data = {
        openid: _this.openid,
        kid: _this.kid,
        time: time.toString(),
      };
      var params = {
        url: "/edu/updateTime",
        type: Util.method.post,
        data: data,
        success: _successFun,
      };
      Util.ajax(_this, params);
      _this.showSpin = true;
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          _this.showKcDetail(_this.kid);
        } else {
          _this.$Message.destroy();
          _this.$Message.error("更新课时失败!");
        }
      }
    },
    show: function (data) {
      var _this = this;
      var openid = data.openid;
      _this.openid = openid;

      _this.dataDetail = {};
      _this.dataDetail_kc = [];
      _this.dataDetail_storys = [];
      _this.getKcList();
      _this.getStoryList();
      _this.getBadgeList();

      var data = {
        openid: _this.openid,
      };
      var params = {
        url: "/user/query",
        type: Util.method.post,
        data: data,
        success: _successFun,
      };
      Util.ajax(_this, params);
      _this.showSpin = true;
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || {};
          _this.dataDetail = _data;
          _this.showCurrentTableData = true;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 故事列表
    getStoryList: function () {
      var _this = this;
      var data = {
        openid: _this.openid,
        page: 1,
        size: 100,
      };
      var params = {
        url: "/story/list",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          var _data = res.data || [];
          _this.dataDetail_storys = _data;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 故事详情
    showStoryDetail: function (id) {
      var _this = this;
      if (!id) {
        return false;
      }

      var data = {
        openid: _this.openid,
        id: id,
      };
      var params = {
        url: "/story/query",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          var _data = res.data || {};
          _this.dataDetail_story = _data;
          _this.showStoryDetailData = true;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 获取一个学员的课程
    getKcList: function () {
      var _this = this;
      var data = {
        openid: _this.openid,
        type: "success",
        page: 1,
        size: 100,
      };
      var params = {
        url: "/edu/list",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          var _data = res.data || [];
          _this.dataDetail_kc = _data;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 查询课程信息
    showKcDetail: function (kid) {
      var _this = this;
      if (!kid) {
        return false;
      }
      _this.kid = kid;

      var data = {
        openid: _this.openid,
        id: kid,
      };
      var params = {
        url: "/edu/query",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          var _data = res.data || {};
          _this.dataDetail_kcxx = _data;
          _this.timeOver = _data.time || 0;
          _this.showKcglDetailData = true;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 标记已授课
    checkSteps: function (el) {
      var _this = this;
      var id = el.id;
      if (!id) {
        return false;
      }
      var data = {
        openid: _this.openid,
        kid: _this.kid,
        id: id,
        status: "end",
      };
      var params = {
        url: "/edu/checkSteps",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          _this.showKcDetail(_this.kid);
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 勋章列表
    getBadgeList: function () {
      var _this = this;
      var data = {
        openid: _this.openid,
        type: "other",
      };
      var params = {
        url: "/badge/listAll",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          if (res.data == "kSuccess") {
            _this.dataDetail_badge = [];
          } else {
            var _data = res.data || [];
            _this.dataDetail_badge = _data;
          }
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
    // 点亮徽章
    badgeFun: function (el) {
      var _this = this;
      var type = "add";
      var bid = el.id;
      if (el.openid) {
        type = "del";
      }
      var data = {
        openid: _this.openid,
        bid: bid,
        type: type,
      };
      var params = {
        url: "/badge/updateUser",
        type: Util.method.post,
        data: data,
        success: _successLFun,
      };
      Util.ajax(_this, params);
      function _successLFun(res) {
        if (res.result == 0) {
          _this.getBadgeList();
        } else {
          _this.$Message.destroy();
          _this.$Message.error("修改信息失败!");
        }
      }
    },

    asyncOK: function () {
      var _this = this;
      _this.showCurrentTableData = false;
      _this.showExportData = false;
    },
    asyncOKKc: function () {
      var _this = this;
      _this.showKcglDetailData = false;
    },
    asyncOKSt: function () {
      var _this = this;
      _this.showStoryDetailData = false;
    },
    // 列表多选 选中数据
    selectionChange: function (selection) {
      var _this = this;
      _this.selectionArr = selection;
    },
    // 取消列表选中
    hideNums: function () {
      var _this = this;
      this.$refs.selectionTable.selectAll(false);
      _this.selectionArr = [];
    },
    getData: function () {
      var _this = this;
      var data = {
        page: _this.page,
        size: _this.size,
        keyWord: _this.search_title.trim(),
      };
      var params = {
        url: "/wechat/list",
        type: Util.method.post,
        data: data,
        success: _successFun,
      };
      _this.showSpin = true;
      Util.ajax(_this, params);
      function _successFun(res) {
        _this.showSpin = false;
        if (res.result == 0) {
          var _data = res.data || [];
          _this.total = res.rows;
          _this.data = _data;
          _this.hideNums();
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询信息失败!");
        }
      }
    },
  },
};
</script>
